<template>
  <div class="grading-sidebar">
    <div class="sidebar-section submission-summary-section">
      <h4><i class="fas fa-user-circle"></i> 答卷信息</h4>
      <div class="summary-item">
        <span class="label">学生:</span>
        <span class="value student-name">{{ submission.userId }}</span>
      </div>
      <div class="summary-item">
        <span class="label">学号:</span>
        <span class="value">{{ submission.studentId }}</span>
      </div>
      <div class="summary-item">
        <span class="label"><i class="fas fa-calendar-alt"></i> 提交:</span>
        <span class="value">{{ formatDate(submission.submitTime) }}</span>
      </div>
      <div class="summary-item">
        <span class="label"><i class="fas fa-hourglass-half"></i> 用时:</span>
        <span class="value">{{ formatDuration(submission.duration) }}</span>
      </div>
    </div>

    <div class="sidebar-section score-summary-section">
      <h4><i class="fas fa-star"></i> 得分统计</h4>
      <div class="summary-item total-score-display">
        <span class="label">当前总分:</span>
        <span class="value score-value">{{ currentTotalScore }} / {{ submission.totalScore }}</span>
      </div>
      <div class="summary-item">
        <span class="label">得分率:</span>
        <span class="value">{{ scorePercentage }}%</span>
      </div>
      <div class="progress-bar-wrapper">
        <div class="progress-bar-track-sidebar">
            <div class="progress-bar-fill-sidebar" :style="{ width: scorePercentage + '%' }"></div>
        </div>
      </div>
    </div>

    <div class="sidebar-section question-nav-section">
      <h4><i class="fas fa-list-ol"></i> 题目导航</h4>
      <div v-for="(group, questionTypeText) in groupedQuestions" :key="type" class="question-type-group">
        <h5 class="question-type-header">{{ questionTypeText }}</h5>
        <div class="question-grid">
          <button
            v-for="question in group"
            :key="question.id"
            class="question-nav-item"
            :class="{
              'active': currentQuestionIndex === question.originalIndex,
              'is-graded': question.userAnswer.gradingResultDTO.userScore !== null && question.userAnswer.gradingResultDTO.userScore  !== undefined
            }"
            @click="$emit('navigate-to-question', question.originalIndex)"
            :title="`第 ${question.originalIndex + 1} 题 - ${question.userAnswer.gradingResultDTO.userScore!== null && question.userAnswer.gradingResultDTO.userScore !== undefined ? (question.userAnswer.gradingResultDTO.userScore + '/' + question.score) : '未批改'}`"
          >
            <span class="question-number">{{ question.originalIndex + 1 }}</span>
            <span class="question-nav-score">
              {{ question.userAnswer.gradingResultDTO.userScore != null ? question.userAnswer.gradingResultDTO.userScore : 0 }}/{{ question.score }}
            </span>
            <i v-if="question.score !== null && question.score !== undefined" class="fas fa-check-circle graded-icon"></i>
            <i v-else class="far fa-circle needs-grading-icon"></i>
          </button>
        </div>
      </div>
    </div>



  </div>
</template>

<script setup>
import { computed, onMounted } from 'vue';
import { formatDate, formatDuration } from '../utils';

const props = defineProps({
  submission: Object,
  currentTotalScore: Number,
  currentQuestionIndex: Number
});

defineEmits(['navigate-to-question']);

const scorePercentage = computed(() => {
  if (!props.submission || !props.submission.totalScore || props.submission.totalScore === 0) return 0;
  return Math.round((props.currentTotalScore / props.submission.totalScore) * 100);
});

/**
 * New: Computed property to group questions by type.
 * It also preserves the original index for navigation.
 */
const groupedQuestions = computed(() => {
  if (!props.submission || !props.submission.answers) {
    return {};
  }
  return props.submission.answers.reduce((groups, question, index) => {
    const type = question.quTypeDictText || '未分类';
    if (!groups[type]) {
      groups[type] = [];
    }
    // Add the question along with its original index
    groups[type].push({ ...question, originalIndex: index });
    return groups;
  }, {});
});



onMounted(() => {
console.log('Grouped Questions:', props.submission.answers);
});


</script>

<style scoped>
.grading-sidebar {
  width: 320px;
  min-width: 300px;
  background-color: #f8f9fa;
  padding: 1.25rem;
  border-right: 1px solid #dee2e6;
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.sidebar-section {
  background-color: #fff;
  padding: 1rem;
  border-radius: 0.3rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.sidebar-section h4 {
  font-size: 1.05rem;
  color: #343a40;
  margin-top: 0;
  margin-bottom: 0.8rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e9ecef;
  display: flex;
  align-items: center;
}
.sidebar-section h4 i {
  margin-right: 0.5rem;
  color: #007bff;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}
.summary-item .label { color: #6c757d; font-weight: 500; margin-right: 0.5rem; display: inline-flex; align-items: center; }
.summary-item .label i { margin-right: 0.3rem; width: 14px; }
.summary-item .value { color: #212529; text-align: right; word-break: break-word; }
.summary-item .student-name { font-weight: bold; color: #0056b3; }
.total-score-display .score-value { font-size: 1.1rem; font-weight: bold; color: #007bff; }
.progress-bar-wrapper { margin-top: 0.5rem; }
.progress-bar-track-sidebar { height: 8px; background-color: #e9ecef; border-radius: 4px; overflow: hidden; }
.progress-bar-fill-sidebar { height: 100%; background-color: #28a745; transition: width 0.3s ease; border-radius: 4px; }

.question-nav-section h4 i { color: #17a2b8; }

/* --- Styles for the New Grouped Layout --- */
.question-type-group:not(:last-child) {
  margin-bottom: 1rem; /* Space between groups */
}

.question-type-header {
  font-size: 0.9rem;
  font-weight: 600;
  color: #495057;
  padding: 0.25rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid #e9ecef;
}

.question-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  gap: 0.5rem;
}

.question-nav-item {
  padding: 0.5rem 0.25rem;
  font-size: 0.8rem;
  border: 1px solid #ced4da;
  border-radius: 0.2rem;
  background-color: #fff;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease-in-out;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  position: relative;
}
.question-nav-item:hover {
  background-color: #e9ecef;
  border-color: #adb5bd;
}
.question-nav-item.active {
  background-color: #007bff;
  color: white;
  border-color: #0056b3;
  transform: translateY(-2px); /* Add a subtle "pop" effect */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.question-nav-item.active .question-nav-score,
.question-nav-item.active .graded-icon,
.question-nav-item.active .needs-grading-icon {
  color: white;
}

.question-number {
  font-weight: bold;
  display: block;
  font-size: 0.9rem;
  margin-bottom: 0.1rem;
}
.question-nav-score {
  font-size: 0.7rem;
  color: #6c757d;
}
.question-nav-item.is-graded .question-nav-score {
  color: #28a745;
  font-weight: 500;
}
.question-nav-item.active.is-graded .question-nav-score {
  color: #fff;
}

.graded-icon, .needs-grading-icon {
    font-size: 0.65rem;
    position: absolute;
    top: 4px;
    right: 4px;
}
.graded-icon { color: #28a745; }
.needs-grading-icon { color: #ffc107; }

.question-nav-item.active .graded-icon,
.question-nav-item.active .needs-grading-icon {
    color: rgba(255,255,255,0.8);
}
</style>
